<template>
	<button @click="!disabled&&click()" :disabled="disabled" class="u-reset-button button-code" hover-class="u-hover-class"
		:style="'color: '+color+';background-color:'+bgColor+';'">{{getCodeText}}</button>
</template>

<script>
	export default {
		name: "ice-button-code",
		props: {
			color: {
				type: String,
				default: '#000000'
			},
			bgColor: {
				type: String,
				default: 'transparent'
			}
		},
		data() {
			return {
				timeCount: 60,
				getCodeText: '获取验证码',
				disabled: false,
			};
		},
		methods: {
			async click() {
				this.$emit("click", "");
			},
			async start() {
				this.disabled = true;
				this.getCodeText = this.timeCount + "s";
				this.countDown();
				this.$toast('验证码已发送，请注意接收')
				// this.$emit("handleSend","");
			},
			async countDown() {
				setTimeout(() => {
					if (this.timeCount > 1) {
						this.timeCount--;
						this.getCodeText = this.timeCount + "s";
						this.countDown();
					} else {
						this.timeCount = 60;
						this.disabled = false;
						this.getCodeText = '获取验证码';
					}
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.button-code {
		font-size: 26rpx;
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: center;

		&::after {
			background-color: transparent;
		}
	}
</style>